
import {View} from "@tarojs/components";
import AssetImage from "@/common/AssetImage";
import {Cell} from "@antmjs/vantui";
import React, {CSSProperties, ReactNode, useRef} from "react";
import StyleUtils from "@/utils/style_utils";

export interface CellXProps {
  renderTitle?: ReactNode
  /**
   * @description 自定义渲染左侧icon
   */
  renderIcon?: ReactNode
  /**
   * @description 自定义label显示内容
   */
  renderLabel?: ReactNode
  /**
   * @description 自定义icon显示内容
   */
  renderRightIcon?: ReactNode
  /**
   * @description 自定义右边内容后跟随的内容
   */
  renderExtra?: ReactNode
  backgroundColor?: string
  margin?: string
  vPadding?: string;
}

export default function CellX(pros: CellXProps) {

  const cellStyle = useRef(StyleUtils.getCellStyle({
    backgroundColor: 'transparent',
    vPadding: pros.vPadding?pros.vPadding:'0px',
    hPadding: '10px',
    margin: '0px'
  }));

  return (
    <View style={{margin: pros.margin?pros.margin:'10px', padding: '5px', borderRadius: '10px', backgroundColor: pros.backgroundColor?pros.backgroundColor:AssetImage.themeColor}}
      border
    >
      <Cell renderTitle={pros.renderTitle}
        renderRightIcon={pros.renderRightIcon}
        renderIcon={pros.renderIcon}
        renderLabel={pros.renderLabel}
        renderExtra={pros.renderExtra}
        style={cellStyle.current} border={false}
      />
    </View>
  )
}


